{% extends "base.html" %}
{% load i18n bootstrap3 dv_filters %}

{% block head_title %}{% blocktrans with name=userprofile.get_full_name %}Modifier le niveau d’accès de {{name}} ?{% endblocktrans %}{% endblock %}
{% block content %}
  <div class="panel panel-warning">
    <div class="panel-heading">
          <h2 class="panel-title">
            {% if requester_is_state_manager and profile_is_coordinator %}
            {% blocktrans with name=userprofile.get_full_name %}Modifier les établissements gérés de {{name}} ?{% endblocktrans %}
            {% else %}{% blocktrans with name=userprofile.get_full_name %}Modifier le niveau d’accès de {{name}} ?{% endblocktrans %}{% endif %}
          </h2>
    </div>
    <div class="panel-body">
      <form method="POST" action="" class="form-horizontal">
          {% csrf_token %}
          {% bootstrap_form form layout='horizontal' size='small' %}
          {% buttons %}
              <button type="submit" class="btn btn-warning pull-right">{% trans 'Confirmer' %}</button>
              <a class="btn btn-default" href="{% url 'user-detail' userprofile.id %}">{% trans "Annuler" %}</a>
          {% endbuttons %}
      </form>
    </div>
  </div>
{% endblock %}

{% block bootstrap3_extra_script %}
{{ form.media.js }}
<script type="text/javascript">
function onlyStatesIfStateManager() {
    // Ne permet pas la coche dans le canton d’activité pour Défi Vélo Mobile
    [
    {role: 'state_manager', name: 'managed_states'},
    {role: 'coordinator', name: 'managed_organizations'},
    ].forEach(fieldConfig => {
      disabled = $( '#id_role' ).val() != fieldConfig.role;
      $( '#id_'+fieldConfig.name+' input[name="'+fieldConfig.name+'"]').prop("disabled", disabled);
      if (disabled) {
        $( '#id_'+fieldConfig.name).parents(".form-group").hide()
      } else {
        $( '#id_'+fieldConfig.name).parents(".form-group").show()
      }
    })
}

$( '#id_role' ).change( onlyStatesIfStateManager );

{% if request.user|can:"assign_only_coordinator_role" and not request.user|can:"user_set_role" %}
  function onlySelectCoordinatorIfProjectManager() {
    $('#id_role option:not([value="coordinator"])').prop('disabled', true);
    $('#id_role option[value="coordinator"]').prop('disabled', false);
    {% if not user_has_a_role %}
      $('#id_role option[value=""]').prop('disabled', false);
    {% endif %}
  }
{% endif %}

onlyStatesIfStateManager();
onlySelectCoordinatorIfProjectManager()
</script>
{% endblock %}
